<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 西大网上书城</title>
    <link rel="stylesheet" href="css/bookstore.css">
    <style>
        /* 保持所有原有样式不变 */
    </style>
</head>
<body>
<div class="login-container">
    <h1 class="login-title">西大网上书城</h1>
    <p class="login-subtitle">请登录您的账户</p>

    <div id="errorMessage" class="error-message"></div>
    <div id="successMessage" class="success-message"></div>

    <form class="login-form" id="loginForm">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>

        <div class="form-group">
            <label for="captcha">验证码</label>
            <div class="captcha-group">
                <div class="captcha-input">
                    <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required maxlength="4">
                </div>
                <img id="captchaImage" src="./captcha" alt="验证码" class="captcha-image" onclick="refreshCaptcha()">
            </div>
        </div>

        <button type="submit" class="login-btn">登录</button>
    </form>

    <div class="login-links">
        <!-- 修复这一行：将 index.html 改为 home.html -->
        <a href="./home.html">返回首页</a>
        <a href="javascript:void(0)" onclick="refreshCaptcha()">刷新验证码</a>
    </div>
</div>

<script>
    // 刷新验证码
    function refreshCaptcha() {
        const captchaImage = document.getElementById('captchaImage');
        captchaImage.src = './captcha?t=' + new Date().getTime();
    }

    // 表单提交处理
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const captcha = document.getElementById('captcha').value;

        // 简单的前端验证
        if (!username || !password || !captcha) {
            showMessage('请填写所有字段', 'error');
            return;
        }

        // 发送登录请求
        fetch('./login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&captcha=${encodeURIComponent(captcha)}`
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showMessage('登录成功！正在跳转...', 'success');
                setTimeout(() => {
                    // 修复：跳转到 books 页面
                    if (data.redirect) {
                        window.location.href = data.redirect;
                    } else {
                        window.location.href = './books';
                    }
                }, 1000);
            } else {
                showMessage(data.message || '登录失败', 'error');
                refreshCaptcha(); // 登录失败刷新验证码
            }
        })
        .catch(error => {
            showMessage('网络错误，请重试', 'error');
            console.error('Login error:', error);
        });
    });

    // 显示消息
    function showMessage(message, type) {
        const errorDiv = document.getElementById('errorMessage');
        const successDiv = document.getElementById('successMessage');

        if (type === 'error') {
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            successDiv.style.display = 'none';
        } else {
            successDiv.textContent = message;
            successDiv.style.display = 'block';
            errorDiv.style.display = 'none';
        }
    }

    // 页面加载时刷新验证码
    window.onload = refreshCaptcha;
</script>
</body>
</html>